<script>
import {Search,FolderOpened} from "@element-plus/icons-vue";
import axios from "axios";
import { reactive } from 'vue'
export default {
  components:{
    Search,
    FolderOpened
  },
  computed:{
    Search(){
      return Search
    },
    FolderOpened(){
      return FolderOpened
    }
  },
  data(){
  return{
    currentPage:1,
    pageSize:5,
    pageInfo:{},
    dialogFormVisible:false,
    queryorder:reactive({
      date:'',
      state:'',
    }),
  orderData:[],
  orderDetailData:[]
}},
methods:{
  btnShowDetail(row){
    axios.get("http://localhost:8080/orderdetail/info", { params: { order_id: row.order_id } })
        .then(response => {
          this.orderDetailData = response.data; // 将获取到的数据赋值给 orderDetailData
          console.log(this.orderDetailData);
          this.dialogFormVisible = true;
        })
        .catch(error => {
          console.log(error);
        });
  },
  onSubmit(){
    console.log(this.queryorder);
    this.LoadorderData();
  },
  LoadorderData(){
    this.$http.get("http://localhost:8080/order/queryorder",{params:{
        date:this.queryorder.date,
        state:this.queryorder.state,
      }}).then((res)=>{
      this.orderData = res.data
      console.log(this.orderData);
    }).catch(function(err){
      console.log(err);
    })
  },
  LoadOrderPageData(){
    this.$http.get("http://localhost:8080/order/page",{params:{
        page:this.currentPage,
        size:this.pageSize
      }}).then((res)=>{
      this.pageInfo = res.data
      this.orderData = res.data.list
      console.log(this.orderData);
    }).catch(function(err){
      console.log(err);
    })
  },
  handleCurrentChange(currPage){
    console.log(currPage);
    this.currentPage = currPage
    this.LoadOrderPageData()
  },
  handleSizeChange(pageSize){
    console.log(pageSize);
    this.pageSize = pageSize
    this.currentPage = 1
    this.LoadOrderPageData()

  }
},
  mounted(){
    this.LoadorderData()
    this.LoadOrderPageData()
  }
}

</script>

<template>
  <el-card style="max-width: 100%">
    <template #header>
      <div class="card-header">
        <span>
          <h2 class="card-title">订单管理</h2>
        </span>
      </div>
    </template>
  <el-form :inline="true" :model="queryorder" class="demo-form-inline">
    <el-form-item>
    <div class="demo-date-picker">
      <div class="block">
        <el-date-picker
            v-model="queryorder.date"
            type="date"
            placeholder="--请选择日期--"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
        />
      </div>
    </div>
    </el-form-item>
    <el-form-item label="订单状态">
      <el-select v-model="queryorder.state" placeholder="--请选择--" style="width:120px" clearable>
        <el-option label="已完成" value="已完成" />
        <el-option label="待付款" value="待付款" />
        <el-option label="待发货" value="待发货" />
        <el-option label="在途中" value="在途中" />
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button default  :icon="Search" type="primary" @click="onSubmit">查询</el-button>
    </el-form-item>
  </el-form>
    <!-- 显示订单表 -->
  <el-table :data="orderData" stripe style="width: 100%">
    <el-table-column prop="order_id" label="订单编号" />
    <el-table-column prop="buyer_id" label="买家ID" />
    <el-table-column prop="order_state" label="订单状态" />
    <el-table-column prop="order_createtime" label="订单创建时间" />
    <el-table-column prop="shipping_address" label="发货地址" />
    <el-table-column prop="delivery_address" label="收货地址" />
    <el-table-column prop="total_price" label="订单总金额(元)" />
    <el-table-column fixed="right" label="操作">
      <template #default="scope">
        <el-button default type="primary"  :icon="FolderOpened" @click="btnShowDetail(scope.row)">
          查看详情
        </el-button>
      </template>
    </el-table-column>
  </el-table>
    <br/>
    <!-- 分页功能 -->
    <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[5,6,7,8,9,10]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageInfo.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
  </el-card>
<!-- 订单详情对话框 -->
  <el-dialog v-model="dialogFormVisible" title="订单详情" width="800" center>
    <el-table :data="orderDetailData">
      <el-table-column prop="order_detailid" label="订单详情编号"></el-table-column>
      <el-table-column prop="order_id" label="订单编号"></el-table-column>
      <el-table-column prop="goods_id" label="商品ID"></el-table-column>
      <el-table-column prop="subtotal" label="小计金额"></el-table-column>
      <el-table-column prop="count" label="购买数量"></el-table-column>
      <el-table-column prop="create_date" label="订单创建日期"></el-table-column>
    </el-table>
  </el-dialog>
</template>

<style scoped>
.demo-date-picker {
  display: flex;
  width: 100%;
  padding: 0;
  flex-wrap: wrap;
}
.demo-date-picker .block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  flex: 1;
}
.demo-date-picker .block:last-child {
  border-right: none;
}
.card-title {
  text-align: center; /* 将标题文本居中对齐 */
}
</style>